<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
  <title>坐标系转换示例</title>
  <style>
    #canvasA, #canvasB {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<h2>坐标系A</h2>
<canvas id="canvasA" width="200" height="200"></canvas>

<h2>坐标系B</h2>
<canvas id="canvasB" width="600" height="400"></canvas>

<script>
  // 坐标系A
  var canvasA = document.getElementById('canvasA');
  var ctxA = canvasA.getContext('2d');

  // 绘制坐标系A
  ctxA.beginPath();
  ctxA.moveTo(100, 0);
  ctxA.lineTo(100, 200);
  ctxA.moveTo(0, 100);
  ctxA.lineTo(200, 100);
  ctxA.strokeStyle = 'blue';
  ctxA.stroke();

  // 坐标系B
  var canvasB = document.getElementById('canvasB');
  var ctxB = canvasB.getContext('2d');

  // 绘制坐标系B
  ctxB.beginPath();
  ctxB.moveTo(300, 0);
  ctxB.lineTo(300, 400);
  ctxB.moveTo(0, 200);
  ctxB.lineTo(600, 200);
  ctxB.strokeStyle = 'red';
  ctxB.stroke();

  // 坐标转换函数
  function convertCoordinate(ax, ay) {
    // 坐标系A的原点和单位长度
    var ax0 = 100;
    var ay0 = 100;
    var unitA = 10;

    // 坐标系B的原点和单位长度
    var bx0 = 300;
    var by0 = 200;
    var unitB = 20;

    // 进行坐标转换
    var bx = (ax - ax0) * (unitB / unitA) + bx0;
    var by = (ay - ay0) * (unitB / unitA) + by0;

    return { x: bx, y: by };
  }

  // 在坐标系A中绘制点P
  ctxA.beginPath();
  ctxA.arc(110, 120, 3, 0, 2 * Math.PI);
  ctxA.fillStyle = 'black';
  ctxA.fill();

  // 将点P的坐标转换到坐标系B中
  var pointP_A = { x: 110, y: 120 };
  var pointP_B = convertCoordinate(pointP_A.x, pointP_A.y);

  // 在坐标系B中绘制转换后的点P
  ctxB.beginPath();
  ctxB.arc(pointP_B.x, pointP_B.y, 3, 0, 2 * Math.PI);
  ctxB.fillStyle = 'black';
  ctxB.fill();
</script>
</body>
</html>
